<template>
  <view class="hotel-room-list-data">
    <view class="hotel-room-list-head1">
      <view class="hotel-room-list-left1">
        <view class="hotel-room-list-one1">共找到{{ roomTotal }}个房型</view>
        <view
          style="display: flex;"
          @tap="$emit('showRoomShapePop')"
        >
          <image 
            src="/static/images/HotelRoomList/select.png"
            mode=""
            class="hotel-room-list-two1"
            
          />
          <view
            class="hotel-room-list-three1"
          >
            筛选
          </view>
        </view>
      </view>
      <view class="hotel-room-list-right1">
        <view
          style="display: flex;"
          @tap="$emit('showCalendar')"
        >
          <image
            src="/static/images/HotelRoomList/Calendar.png"
            mode=""
            class="hotel-room-list-calendar"
          />
          <view
            class="hotel-room-list-time"
          >
            {{startMMDD}}-{{endMMDD}}
          </view>
        </view>
        <view
          style="display: flex;"
          @tap="$emit('roomPopup')"
        >
          <image
            src="/static/images/HotelRoomList/icon1.png"
            mode=""
            class="hotel-room-list-icon1"
          />
          <view
            class="hotel-room-list-text1"
          >
            {{ roomNumList[0].num }}
          </view>
        <image
          src="/static/images/HotelRoomList/person.png"
          mode=""
          class="hotel-room-list-person"
        />
          <view
            class="hotel-room-list-text1"
          >
            {{ totalNum }}
          </view>
        </view>
      </view>
    </view>
    <view v-for="(item) in roomList" :key="item.id">
      <HotelRoomListData :item="item" />
    </view>
  </view>
</template>

<script>
	export default {
    props: {
      roomTotal: {
        type: Number || String,
        default: 0
      },
      startMMDD: {
        type: String,
        default: ''
      },
      endMMDD: {
        type: String,
        default: ''
      },
      roomNumList: {
        type: Array,
        default: () => []
      },
      roomList: {
        type: Array,
        default: () => []
      },
      totalNum: {
        type: Number,
        default: 0
      }
    }
	}
</script>

<style lang="less" scoped>
	@import "../../static/commonStyleLess/grayBox.less";

  .hotel-room-list-data {
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx;
			background-color: rgb(255, 255, 255);
			margin-top: 10rpx;
			border-radius: 16rpx;

			.hotel-room-list-head1 {
				display: flex;
				justify-content: space-between;
				width: 100%;
				box-sizing: border-box;

				.hotel-room-list-left1 {
					display: flex;
					align-items: center;

					.hotel-room-list-one1 {
						// width: 160rpx;
						// height: 34rpx;
						font-weight: 400;
						font-size: 24rpx;
						// line-height: 34rpx;
						letter-spacing: 0px;
						text-align: center;
						color: #979797;
					}

					.hotel-room-list-two1 {
						width: 32rpx;
						height: 32rpx;
						margin-left: 20rpx;
					}

					.hotel-room-list-three1 {
						// width: 48rpx;
						// height: 34rpx;
						font-weight: 400;
						font-size: 24rpx;
						// line-height: 34rpx;
						letter-spacing: 0px;
						text-align: center;
						color: #222222;
						margin-left: 20rpx;
					}
				}

				.hotel-room-list-right1 {
					display: flex;

					.hotel-room-list-calendar {
						width: 32rpx;
						height: 33rpx;
					}

					.hotel-room-list-time {
						// width: 156rpx;
						// height: 40rpx;
						font-weight: 400;
						font-size: 28rpx;
						// line-height: 40rpx;
						letter-spacing: 0px;
						text-align: center;
						color: #222222;
						margin-left: 12rpx;
					}

					.hotel-room-list-icon1 {
						width: 32rpx;
						height: 32rpx;
						margin-left: 16rpx;
					}

					.hotel-room-list-text1 {
						// width: 10rpx;
						// height: 34rpx;
						font-weight: 400;
						font-size: 24rpx;
						// line-height: 34rpx;
						letter-spacing: 0px;
						text-align: center;
						color: #000000;
						margin-left: 10rpx;
					}

					.hotel-room-list-person {
						width: 32rpx;
						height: 32rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
</style>